<template>
  <div>
      <el-row :gutter="20">
      <el-col :span="8">
        <el-input v-model="search.registerId" placeholder="请输入要查询的病历号"></el-input>
      </el-col>
      <el-button @click="dosearch()" type="primary" icon="el-icon-search">搜索</el-button>
      <el-button @click="dofee()" type="primary" icon="el-icon-search">收费</el-button>
    </el-row>
    <br>
     <el-row :gutter="20">
      <el-col :span="8">
        <el-input v-model="register.name" placeholder="姓名" disabled></el-input>
        
      </el-col>
      <el-col :span="8">
        <el-input v-model="register.gender" placeholder="性别" disabled></el-input>
        
      </el-col>
      <el-col :span="8">
        <el-input v-model="register.idno" placeholder="身份证号" disabled></el-input>
        
      </el-col>
    </el-row>
    <br>
    <el-table 
    :data="tableData" 
    style="width: 100%" 
    ref="tab"
    @select="selectRow"
    @selection-change="handleSelectionChange">
      <el-table-column label="id" width="50" type="selection"></el-table-column>
      <el-table-column label="id" width="50" prop="id"></el-table-column>
      <el-table-column label="费用项目名称" width="180" prop="itemName"></el-table-column>
      <el-table-column label="费用项目类别" width="180" prop="itemType">
          <template slot-scope="scope">
          <span v-if="scope.row.itemType == 1">检查</span>
          <span v-else>检验</span>
        </template> 
          </el-table-column>  
         
      <el-table-column label="费用" width="180" prop="fee"></el-table-column>
      <el-table-column label="状态" width="180" prop="status">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1">待缴费</span>
          <span v-else-if="scope.row.status == 2">待检查</span>
          <span v-else-if="scope.row.status == 3">已检查</span>
          <span v-else>已退费</span>
        </template> 
      </el-table-column>
      
    </el-table>
    <el-row :gutter="10"  style="margin: 25px 0 15px 0; ">
      <el-col :span="24" style="font-size: 12px;color: #909399;font-weight: bold;">
        应收金额: &nbsp;&nbsp;{{amount}} 元
      </el-col>

    </el-row>
  </div>
</template>

<script>
export default {
    name: 'Fee',
    data(){
        return {
            search:{
                registerId: ''
            },
            tableData:[],
            register: {
                name:'',
                gender:'',
                idno: ''
            },
            selectedRow: [],
            checkApplyIds: [],
            inspectApplyIds: []
        }
    },
    methods:{
        dosearch(){
            this.axios.get('/register/showfee',response => {
                this.register = response.obj.register
                if(response.obj.checkApplies.length != 0)
                {
                  for(let i = 0;i<response.obj.checkApplies.length;i++)
                  {
                    let applies = response.obj.checkApplies[i]
                    this.tableData.push({
                      id: applies.id,
                      itemType: 1,
                      itemName: applies.itemName,
                      fee: applies.fee,
                      status: applies.status
                    })
                  }
                }
                
                if(response.obj.inspectApplies.length != 0)
                {
                    for(let i=0; i<response.obj.inspectApplies.length ; i++)
                    {
                      let inspects = response.obj.inspectApplies[i]
                      this.tableData.push({
                        id: inspects.id,
                        itemType: 2,
                        itemName: inspects.itemName,
                        fee: inspects.fee,
                        status: inspects.status
                      })
                    }
                }
            },this.search)
        },
        handleSelectionChange(rows){
            this.selectedRow = []
            this.checkApplyIds = []
            this.inspectApplyIds = []
            for(let i = 0;i < rows.length;i++)
            {
                if(rows[i].status == 1)
                {
                    this.selectedRow.push(rows[i])
                    if(rows[i].itemType == 1)
                    {
                        this.checkApplyIds.push(rows[i].id)
                    }
                    else{
                        this.inspectApplyIds.push(rows[i].id)
                    }
                }
                else{
                    this.$refs['tab'].toggleRowSelection(rows[i],false)
                }
            }
            
        },
        selectRow(selection,row){
            if(row.status != 1){
                this.$refs['tab'].toggleRowSelection(row,false)
            }
        },
        dofee(){
          this.axios.post('/register/collectfee', response => {
          },{checkApplyIds:this.checkApplyIds,inspectApplyIds:this.inspectApplyIds})
        }
    },
    computed:{
      amount(){
            let sum = 0;
            for(let i = 0;i < this.selectedRow.length;i++)
            {
                sum+=this.selectedRow[i].fee
            }
            return sum
        }
    }
}
</script>

<style>

</style>